<php>
    $terminal = $terminal?:"terminal";
</php>
<template tplx="{{$terminal}}">
    <section class="lcms-terminal lcms-terminal-elem-{{$terminal}}">
        <block x-for="(item,index) in $store.{{$terminal}}.texts">
            <div :class="`layui-anim layui-anim-fadein lcms-terminal-${item.type}`" :style="item.color?`color:${item.color}`:''">
                <div class="_text" :title="item.text" x-html="item.text"></div>
                <div class="_progress" x-show="item.progress">
                    <text :style="`width:${item.percent}%`"></text>
                </div>
                <div class="_percent" x-show="item.progress">
                    <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" x-show="item.percent<100"></i>
                    <text x-text="`${item.percent}%`"></text>
                </div>
                <div class="_info" x-show="item.info" x-html="item.info"></div>
            </div>
        </block>
    </section>
</template>
<style>.lcms-terminal{position:relative;box-sizing:border-box;width:100%;height:100%;padding:10px 10px 0 10px;color:#FFFFFF;background-color:#303133;overflow-y:auto}.lcms-terminal>div{padding:5px 0;border-bottom:1px dashed rgb(255 255 255 / 10%)}.lcms-terminal>div:last-child{border:none;padding-bottom:30px}.lcms-terminal-text a{color:inherit;text-decoration:underline}.lcms-terminal-progress{position:relative;display:flex;justify-content:space-between;width:100%}.lcms-terminal-progress div._text{max-width:calc(100% - 100px);margin-right:10px;text-align:left;word-wrap:normal;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lcms-terminal-progress div._progress{flex:1;position:relative;display:flex;align-items:center}.lcms-terminal-progress div._progress text{display:block;border-bottom-width:6px;border-bottom-color:inherit;border-bottom-style:double;opacity:.3;transition:all .3s}.lcms-terminal-progress div._percent{display:flex;justify-content:flex-end;align-items:center;width:50px}.lcms-terminal-progress div._percent i{position:absolute;left:0;font-size:12px}.lcms-terminal-info{position:relative;display:flex;justify-content:space-between;width:100%}.lcms-terminal-info div._text{width:50%;margin-right:10px;text-align:left}.lcms-terminal-info div._info{flex:1;text-align:right;opacity:.5}.lcms-terminal-info a{color:inherit;text-decoration:underline}</style>
<script type="text/javascript" onload>LCMS.util.tplx("store:{{$terminal}}",{elem:null,index:-1,texts:[],timer:null,getIndex(index){if(void 0===index){index=this.index}else if(index<0){index=this.index+index}return index||0},setElem(){if(!this.elem){this.elem=document.getElementsByClassName("lcms-terminal-elem-{{$terminal}}")[0]}},setText(args,index){return this.addText(args,index)},setError(info,index){index=this.getIndex(index);this.texts[index].type="info";this.texts[index].progress=false;this.texts[index].info=info;this.texts[index].color="#F56C6C";this.clearTimer()},setProgress(percent,index){if(percent>=10000){percent/=100000}else{this.clearTimer()}percent=percent||0;percent=percent>=10?parseInt(percent):percent.toFixed(1);percent=percent>100?100:percent;index=this.getIndex(index);this.texts[index].percent=percent},addText(args,index){this.clearTimer();args=Object.assign({type:"text",text:"",progress:false,percent:0,info:null,color:null},args.text?args:{text:args});if(args.progress){args.type="progress";args.percent=parseInt(args.percent);let percent=10000;this.timer=setInterval((()=>{this.setProgress(percent);percent+=10000}),200)}if(args.info){args.type="info"}switch(args.color){case"danger":case"error":args.color="#F56C6C";break;case"success":args.color="#67C23A";break;case"warning":args.color="#E6A23C";break;case"info":args.color="#909399";break;case"primary":args.color="#409EFF";break}if(void 0===index){this.texts.push(args);this.index++;this.setElem();setTimeout((()=>{this.elem.scrollTop=this.elem.scrollHeight}));return this.index}else{index=this.getIndex(index);this.texts[index]=args}},clear(){this.texts=[];this.index=-1},clearTimer(){if(this.timer){clearInterval(this.timer);this.timer=null}}});</script>